<template>
	<!-- <div ref="myChart" :style="{width: '300px', height: '300px'}"></div> -->
	<div class="all">
        <div ref="myChart" class="hao">11</div>
		<div ref="myChart2" class="hao"></div>
		<div ref="myChart3" class="hao"></div>
		<div ref="myChart5" class="hao"></div>
		<div ref="myChart6" class="hao"></div>
		<div ref="myChart7" class="hao"></div>
	</div>
	
</template>

<script>
	// 引入基本模板
	// let echarts = require('echarts/lib/echarts')   //按需加载
	let echarts = require('echarts');
	require('echarts-gl');
	// console.log(555555555555, echarts3d)

	// 引入柱状图组件
	// require('echarts/lib/chart/bar')
	// 引入提示框和title组件
	// require('echarts/lib/component/tooltip')
	// require('echarts/lib/component/title')

	export default {
		props: {
			blData: {
				type: Object,
				require: true
			},
			color: {
				type: Array,
				default: function (){
					return ['#1a9bfc', '#99da69', '#e32f46', '#7049f0', '#fa704d', '#01babc', ]
				}
			}
		},
		mounted() {
			let myChart = echarts.init(this.$refs.myChart)
			let myChart2 = echarts.init(this.$refs.myChart2)
			let myChart3 = echarts.init(this.$refs.myChart3)
			let myChart5 = echarts.init(this.$refs.myChart5)
			let myChart6 = echarts.init(this.$refs.myChart6)
			let myChart7 = echarts.init(this.$refs.myChart7)
			
            var option1 = {
                title: {
                    text: 'ECharts'
                },
                tooltip: {},
                legend: {
                    data:['销量']
                },
                xAxis: {
                    data: ["衬衫123","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
				},
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 30]
                }]
            };
			/////////////////////////////////////////////////////////////////////////////////////////////////////////

				var dataAxis = ['点', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏', '上', '滑', '动', '能', '够', '自', '动', '缩', '放'];
				var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];
				var yMax = 500;
				var dataShadow = [];

				for (var i = 0; i < data.length; i++) {
					dataShadow.push(yMax);
				}

			var	option2 = {
					title: {
						text: '特性示例：渐变色 阴影 点击缩放',
						subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
					},
					xAxis: {
						data: dataAxis,
						axisLabel: {
							inside: true,
							textStyle: {
								color: '#fff'
							}
						},
						axisTick: {
							show: false
						},
						axisLine: {
							show: false
						},
						z: 10
					},
					yAxis: {
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							textStyle: {
								color: '#999'
							}
						}
					},
					dataZoom: [
						{
							type: 'inside'
						}
					],
					series: [
						{ // For shadow
							type: 'bar',
							itemStyle: {
								color: 'rgba(0,0,0,0.05)'
							},
							barGap: '-100%',
							barCategoryGap: '40%',
							data: dataShadow,
							animation: false
						},
						{
							type: 'bar',
							itemStyle: {
								color: new echarts.graphic.LinearGradient(
									0, 0, 0, 1,
									[
										{offset: 0, color: '#83bff6'},
										{offset: 0.5, color: '#188df0'},
										{offset: 1, color: '#188df0'}
									]
								)
							},
							emphasis: {
								itemStyle: {
									color: new echarts.graphic.LinearGradient(
										0, 0, 0, 1,
										[
											{offset: 0, color: '#2378f7'},
											{offset: 0.7, color: '#2378f7'},
											{offset: 1, color: '#83bff6'}
										]
									)
								}
							},
							data: data
						}
					]
				};

				// Enable data zoom when user click bar.
				var zoomSize = 6;
				myChart.on('click', function (params) {
					console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
					myChart.dispatchAction({
						type: 'dataZoom',
						startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
						endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
					});
				});








			/////////////////////////////////////////////////////////////////////////////////////////////////////////

				var	option3 = {
						tooltip: {
							trigger: 'item',
							// formatter: '{a} <br/>{b}: {c} ({d}%)'
						},
						legend: {
							orient: 'vertical',
							left: 10,
							data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
						},
						series: [
							{
								name: '访问来源',
								type: 'pie',
								radius: ['50%', '70%'],
								avoidLabelOverlap: false,
								label: {
									normal: {
										show: false,
										position: 'center'
									},
									emphasis: {
										show: true,
										textStyle: {
											fontSize: '30',
											fontWeight: 'bold'
										}
									}
								},
								labelLine: {
									normal: {
										show: false
									}
								},
								data: [
									{value: 335, name: '直接访问'},
									{value: 310, name: '邮件营销'},
									{value: 234, name: '联盟广告'},
									{value: 135, name: '视频广告'},
									{value: 1548, name: '搜索引擎'}
								]
							}
						]
					};













			//////////////////////////////////////////////////////////////////////////////////////////////////////////



					var data1 = genData(50);

					var option5 = {
						title: {
							text: '同名数量统计',
							subtext: '纯属虚构',
							left: 'center'
						},
						tooltip: {
							trigger: 'item',
							formatter: '{a} <br/>{b} : {c} ({d}%)'
						},
						legend: {
							type: 'scroll',
							orient: 'vertical',
							right: 10,
							top: 20,
							bottom: 20,
							data: data1.legendData,

							selected: data1.selected
						},
						series: [
							{
								name: '姓名',
								type: 'pie',
								radius: '55%',
								center: ['40%', '50%'],
								data: data1.seriesData,
								emphasis: {
									itemStyle: {
										shadowBlur: 10,
										shadowOffsetX: 0,
										shadowColor: 'rgba(0, 0, 0, 0.5)'
									}
								}
							}
						]
					};




					function genData(count) {
						var nameList = [
							'赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈', '韩', '杨', '朱', '秦', '尤', '许', '何', '吕', '施', '张', '孔', '曹', '严', '华', '金', '魏', '陶', '姜', '戚', '谢', '邹', '喻', '柏', '水', '窦', '章', '云', '苏', '潘', '葛', '奚', '范', '彭', '郎', '鲁', '韦', '昌', '马', '苗', '凤', '花', '方', '俞', '任', '袁', '柳', '酆', '鲍', '史', '唐', '费', '廉', '岑', '薛', '雷', '贺', '倪', '汤', '滕', '殷', '罗', '毕', '郝', '邬', '安', '常', '乐', '于', '时', '傅', '皮', '卞', '齐', '康', '伍', '余', '元', '卜', '顾', '孟', '平', '黄', '和', '穆', '萧', '尹', '姚', '邵', '湛', '汪', '祁', '毛', '禹', '狄', '米', '贝', '明', '臧', '计', '伏', '成', '戴', '谈', '宋', '茅', '庞', '熊', '纪', '舒', '屈', '项', '祝', '董', '梁', '杜', '阮', '蓝', '闵', '席', '季', '麻', '强', '贾', '路', '娄', '危'
						];
						var legendData = [];
						var seriesData = [];
						var selected = {};
						for (var i = 0; i < count; i++) {
							var name = Math.random() > 0.65
								? makeWord(4, 1) + '·' + makeWord(3, 0)
								: makeWord(2, 1);
							legendData.push(name);
							seriesData.push({
								name: name,
								value: Math.round(Math.random() * 100000)
							});
							selected[name] = i < 6;
						}

						return {
							legendData: legendData,
							seriesData: seriesData,
							selected: selected
						};

						function makeWord(max, min) {
							var nameLen = Math.ceil(Math.random() * max + min);
							var name = [];
							for (var i = 0; i < nameLen; i++) {
								name.push(nameList[Math.round(Math.random() * nameList.length - 1)]);
							}
							return name.join('');
						}
					}



 /////////////////////////////////////////////////////////////////////////////////////////////////////////////


					var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',
							'7a', '8a', '9a','10a','11a',
							'12p', '1p', '2p', '3p', '4p', '5p',
							'6p', '7p', '8p', '9p', '10p', '11p'];
					var days = ['Saturday', 'Friday', 'Thursday',
							'Wednesday', 'Tuesday', 'Monday', 'Sunday'];

					var data6 = [[0,0,5],[0,1,1],[0,2,0],[0,3,0],[0,4,0],[0,5,0],[0,6,0],[0,7,0],[0,8,0],[0,9,0],[0,10,0],[0,11,2],[0,12,4],[0,13,1],[0,14,1],[0,15,3],[0,16,4],[0,17,6],[0,18,4],[0,19,4],[0,20,3],[0,21,3],[0,22,2],[0,23,5],[1,0,7],[1,1,0],[1,2,0],[1,3,0],[1,4,0],[1,5,0],[1,6,0],[1,7,0],[1,8,0],[1,9,0],[1,10,5],[1,11,2],[1,12,2],[1,13,6],[1,14,9],[1,15,11],[1,16,6],[1,17,7],[1,18,8],[1,19,12],[1,20,5],[1,21,5],[1,22,7],[1,23,2],[2,0,1],[2,1,1],[2,2,0],[2,3,0],[2,4,0],[2,5,0],[2,6,0],[2,7,0],[2,8,0],[2,9,0],[2,10,3],[2,11,2],[2,12,1],[2,13,9],[2,14,8],[2,15,10],[2,16,6],[2,17,5],[2,18,5],[2,19,5],[2,20,7],[2,21,4],[2,22,2],[2,23,4],[3,0,7],[3,1,3],[3,2,0],[3,3,0],[3,4,0],[3,5,0],[3,6,0],[3,7,0],[3,8,1],[3,9,0],[3,10,5],[3,11,4],[3,12,7],[3,13,14],[3,14,13],[3,15,12],[3,16,9],[3,17,5],[3,18,5],[3,19,10],[3,20,6],[3,21,4],[3,22,4],[3,23,1],[4,0,1],[4,1,3],[4,2,0],[4,3,0],[4,4,0],[4,5,1],[4,6,0],[4,7,0],[4,8,0],[4,9,2],[4,10,4],[4,11,4],[4,12,2],[4,13,4],[4,14,4],[4,15,14],[4,16,12],[4,17,1],[4,18,8],[4,19,5],[4,20,3],[4,21,7],[4,22,3],[4,23,0],[5,0,2],[5,1,1],[5,2,0],[5,3,3],[5,4,0],[5,5,0],[5,6,0],[5,7,0],[5,8,2],[5,9,0],[5,10,4],[5,11,1],[5,12,5],[5,13,10],[5,14,5],[5,15,7],[5,16,11],[5,17,6],[5,18,0],[5,19,5],[5,20,3],[5,21,4],[5,22,2],[5,23,0],[6,0,1],[6,1,0],[6,2,0],[6,3,0],[6,4,0],[6,5,0],[6,6,0],[6,7,0],[6,8,0],[6,9,0],[6,10,1],[6,11,0],[6,12,2],[6,13,1],[6,14,3],[6,15,4],[6,16,0],[6,17,0],[6,18,0],[6,19,0],[6,20,1],[6,21,2],[6,22,2],[6,23,6]];
					var option6 = {
						tooltip: {},
						visualMap: {
							max: 20,
							inRange: {
								color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
							}
						},
						xAxis3D: {
							type: 'category',
							data: hours
						},
						yAxis3D: {
							type: 'category',
							data: days
						},
						zAxis3D: {
							type: 'value'
						},
						grid3D: {
							boxWidth: 200,
							boxDepth: 80,
							viewControl: {
								// projection: 'orthographic'
							},
							light: {
								main: {
									intensity: 1.2,
									shadow: true
								},
								ambient: {
									intensity: 0.3
								}
							}
						},
						series: [{
							type: 'bar3D',
							data: data6.map(function (item) {
								return {
									value: [item[1], item[0], item[2]],
								}
							}),
							shading: 'lambert',

							label: {
								textStyle: {
									fontSize: 16,
									borderWidth: 1
								}
							},

							emphasis: {
								label: {
									textStyle: {
										fontSize: 20,
										color: '#900'
									}
								},
								itemStyle: {
									color: '#900'
								}
							}
						}]
					}










 ////////////////////////////////////////////////////////////////////////////////////////////////////////////

					var	option7 = {
							tooltip: {},
							visualMap: {
								show: false,
								dimension: 2,
								min: -1,
								max: 1,
								inRange: {
									color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
								}
							},
							xAxis3D: {},
							yAxis3D: {},
							zAxis3D: {},
							grid3D: {},
							series: [{
								type: 'surface',
								parametric: true,
								// shading: 'albedo',
								parametricEquation: {
									u: {
										min: -Math.PI,
										max: Math.PI,
										step: Math.PI / 20
									},
									v: {
										min: 0,
										max: Math.PI,
										step: Math.PI / 20
									},
									x: function (u, v) {
										return Math.sin(v) * Math.sin(u);
									},
									y: function (u, v) {
										return Math.sin(v) * Math.cos(u);
									},
									z: function (u, v) {
										return Math.cos(v);
									}
								}
							}]
						};



 ////////////////////////////////////////////////////////////////////////////////////////////////////////////

















 ///////////////////////////////////////////////////////////////////////////////////////////////////////


            // 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option1);
			myChart2.setOption(option2);
			myChart3.setOption(option3);
			myChart5.setOption(option5);
			myChart6.setOption(option6);
			myChart7.setOption(option7);
			
		},
		methods: {
			
		}
	}
</script>

<style scoped>
.all{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
}
.hao{
	width:300px;
	height:300px;
	margin-left:100px;margin-top:50px;
}
</style>
